import { Component } from 'react';
class DemoComment extends Component {
 state={
  title:'',
  content:'',
  list:[
    {
      title: '评论人：jack',
      content: '评论内容： 沙发！！！'
  }
  ]
 }

//  评论人
updateTitle = (e)=>{
  console.log(e.target.value);
  // 从事件对象event中拿到input的值来更新state
  let title = e.target.value
  // 更新state-> setState方法
  this.setState({
    title
  })
}

// 评论内容
updateContent = (e)=>{
   // 从事件对象event中拿到input的值来更新state
   this.setState({
    content: e.target.value
})
}

// 点击按钮参加评论
publish = ()=>{
  console.log(this.state);//获取到评论人和评论内容信息
  // 组装数据格式/更新list数据
  const {title,content} = this.state
  // 第一中方法：用se6结构方法生成一个新的数组，push到新数组中，在更新list
  // let newArr = [...this.state.list]
  // newArr.push({title,content})
  // 第二中方法 concat ()方法可以用于连接两个或多个数组以创建新数组，也可用于连接字符串。
  let newArr = this.state.list.concat([{ title, content }])
  this.setState({
      list: newArr
  })
  this.setState({
    list: newArr
})
}

// 删除
del = (index)=>{
  this.state.list.splice(index,1)
  this.setState({
    list:this.state.list
  })
}

// 清空
delArr = ()=>{
  this.state.list.length=0
  this.setState({
    list:this.state.list
  })
}
  render () {
    return (<>
      <h2>04.案例-发表评论</h2>
      <div className='comment'>
        <div className='comment_content'>
          <div style={{textAlign:'center'}}>
            <div className='inputbox'>
              <input value={this.state.title} className='input' type="text" placeholder='请输入评论人' onChange={this.updateTitle}/>
            </div>
            <div className='textbox'>
              <textarea name="" id="" cols="30" rows="10" placeholder='请输入评论内容' onChange={this.updateContent}></textarea>
            </div>
          </div>
          <button className='button' onClick={this.publish}>发表评论</button>
          <button onClick={this.delArr}>清空</button>
          <div>
            {
              this.state.list.map((item,index)=>{
                return <>
                  <ul key={index}>
                    <li>{item.title}</li>
                    <p>{item.content}</p>
                    <button className='btn-del' onClick={()=>this.del(index)}>删除评论</button>
                  </ul>
                </>
              })
            }
          </div>
        </div>
      </div>
    </>);
  }
}

export default DemoComment;